<template>
    <div>
        <el-dialog v-model="props.visible" title="生产单列表" width="80%" @close="handleCancel">
            <el-form :model="queryParams" class="flex-box" ref="queryRef" :inline="true">
                <div>
                    <el-form-item label="生产单编码" prop="produceNo">
                        <el-input v-model.trim="queryParams.produceNo" placeholder="请输入生产单编码" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </div>
                <el-button type="primary" plain @click="handleSubmit" :disabled="multiple">确认</el-button>
            </el-form>
            <el-row :gutter="20" style="overflow: auto;">
                <el-col :span="8">
                    <el-table v-loading="loading" :data="orderList" stripe border style="cursor: pointer;"
                              @cell-click="handleClick" ref="orderListTable" highlight-current-row>
                        <el-table-column label="序号" width="55" type="index" align="center" />
                        <el-table-column label="生产单编码" align="center" :show-overflow-tooltip="true" prop="produceNo">
                        </el-table-column>
                        <el-table-column label="类型" align="center" :show-overflow-tooltip="true" prop="type">
                            <template v-slot="{ row }">
                                <el-tag :type="row.type == 1 ? 'success' : ''" effect="dark"> {{ row.type == 1 ?
                                    '封面' : "内文" }}</el-tag>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-col>
                <el-col :span="16">
                    <el-table ref="orderRef" v-loading="loadingInfo" :data="paperList" row-key="paperid" stripe border
                              style="cursor: pointer;" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" :reserve-selection="true" width="55" />
                        <el-table-column label="书刊名称" align="center" :show-overflow-tooltip="true" prop="bookName">
                        </el-table-column>
                        <el-table-column label="纸张编码" align="center" :show-overflow-tooltip="true" prop="paperNo">
                        </el-table-column>
                        <el-table-column label="规格" align="center" :show-overflow-tooltip="true" prop="specifications">
                            <template #default="scope">
                                <dict-tag :options="mes_paper_specs" :value="scope.row.specifications" />
                            </template>
                        </el-table-column>
                        <el-table-column label="定量" align="center" :show-overflow-tooltip="true" prop="weight">
                        </el-table-column>
                        <el-table-column label="品牌" align="center" :show-overflow-tooltip="true" prop="brand">
                        </el-table-column>
                        <el-table-column label="纸型" align="center" :show-overflow-tooltip="true" prop="paperType">
                            <template #default="scope">
                                <dict-tag :options="mes_paper_type" :value="scope.row.paperType" />
                            </template>
                        </el-table-column>
                        <el-table-column label="单位" align="center" :show-overflow-tooltip="true" prop="unit">
                            <template #default="scope">
                                <dict-tag :options="mes_paper_unit" :value="scope.row.unit" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <div class="footer">
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                            v-model:limit="queryParams.pageSize" @pagination="getList" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
    import { toNumber } from '@/utils/ruoyi'
    import { getProduceOrderList, getProduceById } from '@/api/production/cover'
    const emit = defineEmits(['changeUpdate', 'cancel'])
    const { proxy } = getCurrentInstance();
    const {
        mes_paper_specs, mes_paper_type, mes_paper_unit
    } = proxy.useDict("mes_paper_unit", "mes_paper_type", "mes_paper_specs");

    const props = defineProps({
        visible: {
            type: Boolean,
            default: false
        },
        orderSelectList: {
            type: Array,
            default: () => { [] }
        },
        search:{
            type:Array ,
            default: () => { [] }
        }

    })

    const orderRef = ref(null)
    const orderList = ref([])
    const paperList = ref([])
    const multiple = ref(true)
    const selectRow = ref([])
    const loading = ref(false)
    const loadingInfo = ref(false)
    const orderListTable = ref(null)
    const queryParams = ref({
        pageNum: 1,
        pageSize: 10,
        status: 2,
    })
    watch(() => props.visible, (val) => {
        if (val) {
            handleQuery()
            nextTick(() => {
                orderRef.value.clearSelection()
                if (props.orderSelectList.length > 0) {
                    props.orderSelectList.forEach(item => {
                        orderRef.value.toggleRowSelection(item, true)
                    })
                }
            })
        }
    })
    const total = ref(0)
    // 选中订单
    const handleClick = (row) => {
        loadingInfo.value = true
        getProduceById({ pid: row.produceId }).then(res => {
            res.data.producePaperList.forEach(item => {
                item.beforeuseNumber = item.usedAmount // 已领用数量
                item.notuseNumber = toNumber((item.reamAmount - item.usedAmount), 4)//未领用数量
                item.useNumber = item.notuseNumber
                item.produceNo = row.produceNo  // 生产单编码
                item.code = item.paperNo
                item.specs = item.specifications
                item.paperid = item.paperInfoId
                item.producePaperid = item.paperId
                res.data.produceProductList.forEach(ele => {
                    if (item.orderProductId == ele.orderProductId) {
                        item.bookName = ele.bookName
                        item.orderNo = ele.orderNo
                    }
                })
            })
            paperList.value = res.data.producePaperList
            loadingInfo.value = false
        })
    }

    // 选中
    const handleSelectionChange = (row) => {
        selectRow.value = row
        multiple.value = !row.length
    }
    const handleSubmit = () => {
        emit('changeUpdate', selectRow.value)
    }
    const handleCancel = () => {
        paperList.value= []
        proxy.resetForm("queryRef");
        emit('cancel')
    }
    const getList = async () => {
        loading.value = true
        //queryParams.value.type=5;
        const res = await getProduceOrderList(queryParams.value,...props.search.quantity)
        orderListTable.value.setCurrentRow(res.rows[0])
        loading.value = false
        orderList.value = res.rows
        handleClick(orderList.value[0])
        total.value = res.total
    }
    // 搜索
    const handleQuery = () => {
        queryParams.value.pageNum = 1;
        getList();
    }
    /** 重置按钮操作 */
    const resetQuery = () => {
        proxy.resetForm("queryRef");
        handleQuery();
    };

    // getList()
</script>

<style lang="scss" scoped></style>